<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>布局</title>
  <style>
    html,body {
      margin:0;
      width: 100%;
      height: 100%;
      text-align: center;
      font-size: 30px;
      font-weight: bold;
    }
    div{
      box-sizing: border-box;
    }
    .container {
      height: 100%;
      position: relative;
    }
    #header {
      background-color:rgb(152, 152, 255);
      width: 100%;
      height: 80px;
      padding-top: 10px;
    }
    #aside {
      background-color:aquamarine;
      float: left;
      width: 200px;
      height: calc(100% - 140px);
      padding-top: 10px;
    }
    #main {
      background-color:honeydew;
      float: left;
      width: calc(100% - 200px);
      height: calc(100% - 140px);
      padding-top: 10px;
      padding-left: 20px;
      text-align: left;
    }
    #footer {
      background-color:darksalmon;
      height: 60px;
      padding-top: 10px;
    }
  </style>
</head>
<body>
<div class="container">
  <div id="header">头部</div>
  <div id="aside">侧边栏</div>
  <div id="main">内容</div>
  <div id="footer">底部</div>
</div>
</body>
</html>